<template>
	<view class="promotion-box">
		<view class="show-scan-code-box">
			<view class="logo-box">
				<image :src="user_info.avatar" mode=""></image>
			</view>
			<view class="mb20">
				<view class="fz24 bold mb10">
					{{user_info.nickname}}
				</view>
				<view class="fz12">
					ID：{{user_info.id}}
				</view>
			</view>
			<view class="qr-code-box mb20">
				<image :src="tug" mode=""></image>
			</view>
			<view class="fz12 c6">
				扫描下载APP
			</view>
		</view>
	</view>
</template>

<script>
	import {
		share
	} from '@/network/api.js'
	import {
		getUserinfo,
	} from '@/network/loginAndMy.js'
	export default {
		data() {
			return {
				tug:"",
				user_info:{}
			}
		},
		onLoad() {
			this.tuig()
			this.getUserinfo()
		},
		methods: {
			// 获取推广码数据
			tuig() {
				share().then(res => {
					if (res.code == 1) {
						this.tug=res.data
					}
				})
			},
			// 获取用户信息
			getUserinfo() {
				getUserinfo().then(res => {
					if (res.code == 1) {
						this.user_info = res.data
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.promotion-box {
		background-image: url('../../../static/my/promotion_bg.png');
		width: 100vw;
		height: 100vh;
		background-repeat: no-repeat;
		background-size: 100% 100%;

		.show-scan-code-box {
			width: 632rpx;
			height: 734rpx;
			background-image: url('../../../static/my/QR_code_bg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -60%);
			text-align: center;
			padding: 80rpx 0 0;
			box-sizing: border-box;

			.logo-box {
				position: absolute;
				top: -60rpx;
				left: 50%;
				transform: translateX(-50%);

				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
			}

			.qr-code-box {
				image {
					width: 380rpx;
					height: 380rpx;
				}
			}
		}
	}
</style>